Вообщем, вот такая вот задачка. Есть на сайте поле с select'ом.
<div id="ServiceBlockGroup">
<div id="CountryServiceOptionsBlock1">
<select name='dynfields[]' class="uk-margin-small-top" id='select_country_id_1' onchange="ajax_update_service(this.value);"><option value=''>страна не выбрана</option></select>
<select name='dynfields[]' class="uk-margin-small-top" id='select_service_id_1'><option value=''>услуга не назначена</option></select><p>
</div>
</div>
Далее есть набор опций, чтобы можно было добавлять дополнительные селекты, если нужно (Как товар в интернет магазине, например)
<input type="button" id="add_field" value="Добавить услугу">
<input type="button" id="rem_field" value="Удалить услугу">
Вот код с помощью которого, можно добавлять дополнительные элементы.
var counter = 1;
$("#add_field").click(function () {
if(counter>10){
alert("Достигнут лимит добавления полей!");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'CountryServiceOptionsBlock' + counter);
newTextBoxDiv.after().html('<select name="dynfields[]' + '" class="uk-margin-small-top" id="select_country_id_' + counter + '" onchange="ajax_update_service(this.value);""><option value="">страна не выбрана</option></select> <select name="dynfields[]' + '" class="uk-margin-small-top" id="select_service_id_' + counter + '""><option value="">услуга не назначена</option></select><p>');
newTextBoxDiv.appendTo("#ServiceBlockGroup");
counter++;
});
$("#rem_field").click(function () {
if(counter==1){
alert("Достигнут лимит удаления полей!");
return false;
}
counter--;
$("#CountryServiceOptionsBlock" + counter).remove();
});
Вот код, с помощью которого наполняется select. (В этот select при помощи ajax запроса и php-обработчика подгружаются данные из базы);
function getCountryValue(counter) {
var country_id = 'select_country_id_';
return country_id.concat(this.counter.toString());
}
function ajax_update_country() {
var oXmlHttp = createXMLHttp();
oXmlHttp.open("post", "../ajax_scripts/countryListUpdate.php", true);
oXmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
oXmlHttp.send(null);
oXmlHttp.onreadystatechange = function() {
if(oXmlHttp.readyState == 4)
{
if(oXmlHttp.status == 200)
{
a = oXmlHttp.responseText;
document.getElementById(getCountryValue()).innerHTML = a;
}
else {displayCustomerInfo("Ошибка: " + oXmlHttp.statusText);}
}
};
}
Ну и собственно вот php обработчик, подгружающий данные в select, но я думаю он тут не нужен. Просто для наглядности.
<?php
include('mysql.php');
$sql_get_countries = mysql_query("SELECT * FROM system_countries");
while($row_country = mysql_fetch_array($sql_get_countries)) {
echo "<option value='".$row_country['country_id']."'>".$row_country['country_name']."</option>";
}
?>
Вопрос заключается в следующем, данный код полностью работоспособен, но ТОЛЬКО для первого селекта. Стоит добавить ещё элементов, и они уже не работают. Хотя в ajax функцию передаются id разными значениями counter.
Как заставить ajax срабатывать при добавлении n-элементов?
Заранее благодарен за помощь.
p.s.
Задавайте любые вопросы, если задача не ясна.
